<template>
  <!--大屏主体内容-->
  <div class="__main mt12">
    <div class="__left">
      <itemBox title="基建投资情况">
        <itemLeftTop/>
      </itemBox>
      <itemBox title="本月劳动力投入" class="mt24">
        <itemLeftBottom/>
      </itemBox>
    </div>
    <div class="__center">
      <itemCenterTop/>
      <div class="bigBox">
        <div class="_tit"><span>项目动态</span></div>
        <div class="__content">
          <itemCenterCenter />
          <div class="divider"></div>
          <itemCenterBottom />
        </div>
      </div>
    </div>
    <div class="__right">
      <itemBox title="项目变更情况">
        <itemRightTop/>
      </itemBox>
      <itemBox title="建筑物情况" class="mt24">
        <itemRightBottom/>
      </itemBox>
    </div>
  </div>
  <!--大屏主体内容-->
</template>

<script>
  import drawMixin from '@/utils/drawMixin'
  import pageTitle from '../components/pageTitle'
  import itemBox from '../components/itemBox'

  import itemLeftTop from './itemLeftTop'
  import itemLeftBottom from './itemLeftBottom'
  import itemCenterTop from './itemCenterTop'
  import itemCenterCenter from './itemCenterCenter'
  import itemCenterBottom from './itemCenterBottom'
  import itemRightTop from './itemRightTop'
  import itemRightBottom from './itemRightBottom'

  let mixin = new drawMixin()
  export default {
    name: 'index',
    components: {
      pageTitle, itemBox,
      itemLeftTop, itemLeftBottom,
      itemCenterTop, itemCenterCenter, itemCenterBottom,
      itemRightTop, itemRightBottom
    },
    mixins: [mixin],
    data() {
      return {
      }
    },
    mounted() {
    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  .mt12 { margin-top: 12px;}
  .mt24 { margin-top: 24px;}
  .__main {
    padding: 0 24px;
    display: grid; grid-template-columns: 470px auto 470px;
    grid-gap: 24px;

    .__center {
      .bigBox {
        width: 100%; height: 550px; background: url('~@/assets/imgSchoolHouse/bigboxBg.svg') left no-repeat;
        margin-top: 24px; position: relative;
        &:after {
          content: ''; display: flex; width: 6px; height: 100%; position: absolute; top: 0; right: -5px;
          background: url('~@/assets/imgSchoolHouse/bigboxBg.svg') right no-repeat;
        }
        ._tit {
          display: flex; align-items: center; height: 42px;
          font-size: 24px; font-family: PingFangSC; font-weight: bold; letter-spacing: 1.96px;
          span { margin-left: 40px;}
        }
        .__content {
          padding: 16px;
          .divider {
            width: 100%; height: 4px; margin: 16px 0;
            background: url('~@/assets/imgSchoolHouse/divider_l.svg') no-repeat;
          }
        }
      }
    }

  }
</style>
